<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表界面</title>
    <script src="../../../static/layui/layui.all.js"></script>
    <script src="../../../static/js/jquery.js"></script>
    <script src="../../../static/js/echarts.js"></script>
    <script src="../../../static/js/echarts.min.js"></script>
    <style>
    .top-left-chart {
    position: relative;
    float: left;
    width: 49%;
    height: 300px;
    border: #dcdcdc solid 1px;
    background-color: #ffffff;
    }

    .top-right-chart {
    position: relative;
    float: right;
    width: 50%;
    height: 300px;
    border: #dcdcdc solid 1px;
    background-color: #ffffff;
    }

    .bottom-left-chart {
    position: absolute;
    top: 315px;
    width: 48.4%;
    height: 50%;
    border: #dcdcdc solid 1px;
    background-color: #ffffff;
    }

    .bottom-right-chart {
    position: absolute;
    top: 315px;
    left: 49.8%;
    width: 49.5%;
    height: 50%;
    border: #dcdcdc solid 1px;
    background-color: #ffffff;
    }
    </style>
</head>
<body>
<div id="main1" class="top-left-chart"></div>
<div id="main2" class="top-right-chart"></div>
<div id="main3" class="bottom-left-chart"></div>
<div id="main4" class="bottom-right-chart"></div>
</body>
<script>
    $(function () {
        $.ajax({
            type : "post",
            async : true,
            url: '/stock/getdetail',
            dataType: "json",
            success: function (data) {
                var productids=[];
                var quantitys=[];
                for (var i = 0; i < data.data.length; i++) {
                    productids.push(data.data[i].productid);
                    quantitys.push(data.data[i].quantity);
                }
                var chartDom = document.getElementById('main1');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '产品库存量一览图'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: productids,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: '数量',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '库存数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: quantitys,
                            itemStyle: {
                                //通常情况下：
                                normal:{
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params){
                                        var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        });

    });
</script>
<script>
    $(function () {
        $.ajax({
            type : "post",
            async : true,
            url: '/stock/getproduct',
            dataType: "json",
            success: function (data) {
                var cate = [];
                var da = [];
                for (var i = 0; i < data.data.length; i++) {
                    cate.push(data.data[i].name);
                    da.push(data.data[i].price)
                }
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '产品价格一览图'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        name: '商品',
                        type: 'category',
                        data: cate
                    },
                    yAxis: {
                        name: '价格',
                        type: 'value'
                    },
                    series: [{
                        data: da,
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        itemStyle: {
                            //通常情况下：
                            normal:{
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (da){
                                    var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de','#91cc75'];
                                    return colorList[da.dataIndex];
                                }
                            }
                        }
                    }]
                };
                option && myChart.setOption(option);
            }
        });
    });
</script>
<script>
    $(function () {
        $.ajax({
            type : "post",
            async : true,
            url: '/stock/getstocks',
            dataType: "json",
            success: function (data) {
                var cate = [];
                var da = [];
                for (var i = 0; i < data.data.length; i++) {
                    cate.push(data.data[i].storehouseid);
                    da.push(data.data[i].enterstockid)
                }

                var chartDom = document.getElementById('main3');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '仓库编号对照图'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        name: '编号',
                        type: 'category',
                        data: da
                    },
                    yAxis: {
                        name: '仓库',
                        type: 'value'
                    },
                    series: [{
                        data: cate,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        itemStyle: {
                            //通常情况下：
                            normal:{
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (cate){
                                    var colorList = ['#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
                                    return colorList[cate.dataIndex];
                                }
                            }
                        }
                    }]
                };
                option && myChart.setOption(option);
            }
        });

    });
</script>
<script>
    $(function () {
        $.ajax({
            type : "post",
            async : true,
            url: '/stock/getdetail',
            dataType: "json",
            success: function (data) {
                var productids=[];
                var quantitys = [];
                var quantity_assists = [];
                for (var i = 0; i < data.data.length; i++) {
                    productids.push(data.data[i].productid);
                    quantitys.push(data.data[i].quantity);
                    quantity_assists.push(data.data[i].quantity_assist);
                }
                var chartDom = document.getElementById('main4');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '库存雷达图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['主计量', '辅计量'],
                        left :'right'
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: productids[0], max: 650},
                            { name: productids[1], max: 650},
                            { name: productids[2], max: 650},
                            { name: productids[3], max: 650},
                            { name: productids[4], max: 650}
                        ]
                    },
                    series: [{
                        name: '预算 vs 开销（Budget vs spending）',
                        type: 'radar',
                        data: [
                            {
                                value:quantitys,
                                name: '主计量'
                            },
                            {
                                value: quantity_assists,
                                name: '辅计量'
                            }
                        ]
                    }]
                };
                option && myChart.setOption(option);
            }
        });
    });
</script>
</html>